<template>
  <div class="header">
    <div class="header-content">
      <div class="logo" @click="goHome">
        <el-icon>
          <Tools />
        </el-icon>
        <span>在线工具集合</span>
      </div>
      <el-menu mode="horizontal" :default-active="activeIndex" class="header-menu" @select="handleSelect">
        <el-menu-item index="/">首页</el-menu-item>
        <el-menu-item index="/tools">工具</el-menu-item>
        <el-sub-menu index="encode-decode">
          <template #title>
            <el-icon>
              <Lock />
            </el-icon>
            编码解码
          </template>
          <el-menu-item index="/encode-decode">编码解码工具集合</el-menu-item>
          <el-menu-item index="/tool/base64">Base64编码解码</el-menu-item>
          <el-menu-item index="/tool/md5">MD5加密</el-menu-item>
          <el-menu-item index="/tool/sha1">SHA1加密</el-menu-item>
          <el-menu-item index="/tool/aes">AES加密解密</el-menu-item>
          <el-menu-item index="/tool/url">URL编码解码</el-menu-item>
          <el-menu-item index="/tool/morse">摩斯电码</el-menu-item>
          <el-menu-item index="/tool/ascii">ASCII转换</el-menu-item>
          <el-menu-item index="/tool/fullwidth">全角半角</el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="generator">
          <template #title>
            <el-icon>
              <DocumentCopy />
            </el-icon>
            生成器
          </template>
          <el-menu-item index="/tool/password-generator">密码生成器</el-menu-item>
          <el-menu-item index="/tool/guid">GUID生成器</el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="image-tools">
          <template #title>
            <el-icon>
              <Picture />
            </el-icon>
            图片工具
          </template>
          <el-menu-item index="/tool/qr-generator">二维码生成器</el-menu-item>
          <el-menu-item index="/tool/image-compress">图片压缩</el-menu-item>
          <el-menu-item index="/tool/image-convert">格式转换</el-menu-item>
          <el-menu-item index="/tool/image-resize">尺寸调整</el-menu-item>
          <el-menu-item index="/tool/image-watermark">添加水印</el-menu-item>
        </el-sub-menu>
      </el-menu>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { Tools, Lock, DocumentCopy, Picture } from '@element-plus/icons-vue'

const router = useRouter()
const route = useRoute()

const activeIndex = computed(() => route.path)

const handleSelect = (key) => {
  router.push(key)
}

const goHome = () => {
  if (route.path !== '/') {
    router.push('/')
  }
}
</script>

<style scoped>
.header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.header-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  height: 60px;
}

.logo {
  display: flex;
  align-items: center;
  color: white;
  font-size: 20px;
  font-weight: bold;
  gap: 8px;
  cursor: pointer;
}

.logo .el-icon {
  font-size: 24px;
}

.header-menu {
  background: transparent;
  border: none;
}

.header-menu .el-menu-item {
  color: white;
  border-bottom: 2px solid transparent;
}

.header-menu .el-menu-item:hover,
.header-menu .el-menu-item.is-active {
  background: rgba(255, 255, 255, 0.1);
  border-bottom-color: white;
}
</style>
